<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" th:href="@{style.css}">
    <title>全球冠状病毒实时统计</title>
</head>
<body>
<div id="app">
    <el-container>
        <el-main>
            <el-row>
                <el-col :span="24">

                    <el-card class="box-card">
                        <div slot="header" class="clearfix">
                            <h1 style="text-align: center">全球冠状病毒实时统计</h1>
                        </div>
                        <ve-line :data="chartData"></ve-line>
                        <div style="margin-top: -45px;">
                            <p>截止北京时间：<span style="font-weight: bold;font-size: 20px">{{data.nowDate}}</span></p>
                            <p>目前全球新冠状病毒确诊病例人数累计：<span
                                    style="font-weight: bold;font-size: 20px">{{data.globalNow}}</span></p>
                            <p>自前一日以来新增确诊病例人数：<span style="font-weight: bold;font-size: 20px">{{data.addedNow}}</span>
                            </p>
                        </div>
                        <el-divider></el-divider>
                        <el-row style="margin-top: 20px;">
                            <el-col :span="10">
                                <el-input v-model="keyword" placeholder="搜索某地区新冠状病毒情况"></el-input>
                            </el-col>
                            <el-col :offset="1" :span="8">
                                <el-button type="primary" size="medium" round @click="search">查找<i class="el-icon-search el-icon--right"></i></el-button>
                            </el-col>
                        </el-row>
                        <el-table
                                :data="data.globalData"
                                border
                                style="width: 100%;margin-top: 30px;">
                            <el-table-column
                                    prop="id"
                                    label="编号"
                                    width="80">
                            </el-table-column>
                            <el-table-column
                                    prop="provinceName"
                                    label="州/省">
                            </el-table-column>
                            <el-table-column
                                    prop="countryName"
                                    label="国家/地区">
                            </el-table-column>
                            <el-table-column
                                    prop="now"
                                    label="累计病例">
                            </el-table-column>
                            <el-table-column
                                    prop="addNumber"
                                    label="新增病例">
                            </el-table-column>
                            <el-table-column
                                    prop="addNumber"
                                    label="操作"
                                    width="100">
                                <template slot-scope="scope">
                                    <el-button type="text" @click="showDetail(scope.row.id)">详情<i
                                            class="el-icon-view el-icon--right"></i></el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-card>
                    <el-dialog
                            title="地区详情"
                            :visible.sync="centerDialogVisible"
                            width="70%"
                            center>
                        <ve-line :data="detailChartData"></ve-line>
                        <div style="margin-top: -45px;">
                            <p>截止北京时间：<span style="font-weight: bold;font-size: 20px">{{data.nowDate}}</span></p>
                            <p>目前<strong style="font-size: 20px;">{{region.countryName}}-{{region.provinceName}}</strong>的新冠状病毒确诊病例人数累计：<span
                                    style="font-weight: bold;font-size: 20px">{{get_first_attribute(region.data)}}</span></p>
                            <p>自前一日以来新增确诊病例人数：<span style="font-weight: bold;font-size: 20px">{{get_first_attribute(region.data)-get_second_attribute(region.data)}}</span>
                            </p>
                        </div>
<!--                        <span slot="footer" class="dialog-footer">-->
<!--                            <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>-->
<!--                        </span>-->
                    </el-dialog>
                </el-col>
            </el-row>


        </el-main>
    </el-container>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!-- V-charts -->
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/v-charts/lib/index.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/v-charts/lib/style.min.css">
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                data: {},                   //全球总数据
                chartData: {},              //全球累计总数的拆线数据
                detailChartData: {},        //某地区详细累计总数的拆线数据
                centerDialogVisible: false, //详情弹窗是否显示信号量
                region:{},                  //地区实体
                keyword:""                  //查询词
            }
        },
        methods: {
            showDetail(id) {
                axios.get("/data/region/find/id/" + id).then(Response => {
                    this.detailChartData = Response.data.chartData;
                    this.region = Response.data.region;
                })
                this.centerDialogVisible = true;
            },
            search(){
                axios.get("/data/region/find/country?name="+this.keyword).then(Response => {
                    this.data.globalData = Response.data;
                })
            },
            get_first_attribute(data){
                for (var key in data)
                    return data[key];
            },
            get_second_attribute(data){
                let index=0;
                for (var key in data){
                    if (index==1){
                        return data[key];
                    }
                    index++;
                }
            }
        },
        mounted: function () {
            axios.get("/data/region/latest").then(Response => {
                this.data = Response.data;
                this.chartData = Response.data.dataList;
            })
        }
    })
</script>
</html>